{% load static %}

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css"
      href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css">
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8"
        src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>
{% include "analyse/importCSS.html" %}

<title>爬虫状态</title>

<div>
    <div class="container">

        {% include 'analyse/header.html' %}
        <div class="col-sm-12">
            <div class="alert alert-success" style="z-index: 10" id="spiderInfo">
                <a href="#" class="close" data-dismiss="alert">
                    &times;
                </a>
                <strong>爬虫已启动！！！稍等，数据马上就爬取好！</strong>
            </div>
        </div>

        <div class="col-sm-12" style="margin-top: 30px;color:#686868;font-weight: 300">
            <table id="example" class="table " cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th data-field="id">ID</th>
                    <th data-field="title">文章标题</th>
                    <th data-field="year">发表年份</th>
                    <th>论文详情</th>
                    <!--<th data-field="local_url"><a href="local_url"></a></th>-->
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
{% include "analyse/footer.html" %}
<script>
    $(document).ready(function () {
        let ajaxCount = 0;
        var table = $('#example').DataTable({
            "ajax": "{% url 'getSpiderData' %}?keyWord={{keyWord}}",
            "columns": [
                {"data": "id"},
                {"data": "title"},
                {"data": "public_year"},
                {
                    "data": "local_url",
                    render: function (data, type, full) {
                        return "<a  target='_blank' href='paperDetail?title=" + full.title + "'>" + '论文详情' + "</a>";
                    }
                },
            ]

        });

        var begin = setInterval(function () {
            ajaxCount++;
            console.log('获取数据');
            table.ajax.reload();

            console.log(ajaxCount);
            if (ajaxCount > 30) {
                console.log('轮询次数过多');
                $('#spiderInfo').text('抓取完成');
                clearInterval(begin);
            }
        }, 5000);



    });

</script>

</body>